refactor(sidebar): use a component to avoid styles repetition

I also fix some overflow/sticky issues.
I have to set overflow auto only when there is no button-like
links otherwise, with translate, the button is cropped on hover.

1 files changed, 3 insertions, 2 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7d25843..fb79b41 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,6 +18,7 @@ import { ParsedUrlQuery } from 'querystring';
 import { useEffect } from 'react';
 import styles from '@styles/pages/Page.module.scss';
 import { Sharing } from '@components/Widget';
+import Sidebar from '@components/Sidebar/Sidebar';
 
 const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
   const {
@@ -67,9 +68,9 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
           dangerouslySetInnerHTML={{ __html: content }}
         ></div>
         <PostFooter subjects={subjects} />
-        <aside className={styles.aside}>
+        <Sidebar>
           <Sharing title={title} excerpt={intro} />
-        </aside>
+        </Sidebar>
         <section className={styles.comments}>
           <CommentsList comments={comments} />
           <CommentForm articleId={post.databaseId} />